<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <link rel="stylesheet" href="./css/metro.css">
    <link rel="stylesheet" href="./css/metro-colors.css">
    <link rel="stylesheet" href="./css/metro-icons.css">
</head>
<body>
<div id="flex-content" >

            <div class="row">
                <div class="cell">
                    <div> </div>
                </div>
                <div class="colspan-6">
                <h1>家庭档案管理</h1>
                <button id="button1">添加档案</button>
<table id="profileTable" class="table striped hovered dataTable border bordered">
                <thead>
                <tr>
                    <th class="text-left">县级编码</th>
                    <th class="text-left">乡镇编码</th>
					<th class="text-left">组编号</th>
					<th class="text-left">家庭编号</th>
					<th class="text-left">户主</th>
                </tr>
                </thead>
                <tbody>
                </tbody>

</table>
                </div>
                <div class="cell">
                    <div> </div>
                </div>

            </div>
            
            
            
                        <div class="row">
                <div class="cell">
                    <div> </div>
                </div>
                <div class="colspan-6">
                
<h1>家庭成员管理</h1>

<button id="button2">添加家庭成员</button>
<table id="memberTable" class="table striped hovered dataTable border bordered">
                <thead>
                <tr>
                	<th class="text-left">ID</th>
                    <th class="text-left">家庭编号</th>
                    <th class="text-left">参合证号</th>
					<th class="text-left">姓名</th>
					<th class="text-left">身份证号</th>
					<th class="text-left">性别</th>
					<th class="text-left">年龄</th>
					<th class="text-left">地址</th>
					<th class="text-left">手机号</th>
					<th class="text-left">与户主关系</th>
					<th class="text-left">是否参合</th>
                </tr>
                </thead>
                <tbody>
                </tbody>

</table>
                </div>
                <div class="cell">
                    <div> </div>
                </div>

            </div>



    <div data-role="dialog" data-close-button="true" data-overlay="true" data-overlay-color="op-dark"
 data-overlay-click-close="true" data-type="info"   id="addFamily"  class="padding20">
 <h2>添加家庭档案</h2>
 <form action="addFamilyProfile" method="post" id="addFamilyProfile">
 <label>行政区域编码</label>
 <input type="text" name="regionCode"><br>
  <label>乡镇编码</label>
 <input type="text" name="countyNo"><br>
  <label>组编码</label>
 <input type="text" name="groupNo"><br>
  <label>户主姓名</label>
 <input type="text" name="hostName"><br>
  <label>户主身份证</label>
  <input type="text" name="hostIdCard"><br>
  <label>家庭编号</label>
  
 </form>
 <button id="sb1">提交</button>
 
 
 </div>


    <div data-role="dialog" data-close-button="true" data-overlay="true" data-overlay-color="op-dark"
 data-overlay-click-close="true" data-type="info"   id="addMember"  class="padding20">
 
 
  <h2>添加家庭成员</h2>
 <form action="addFamilyMember" method="post" id="addFamilyMember">

  <label>姓名</label>
 <input type="text" name="name"><br>
  <label>性别</label>
 <input type="text" name="sex"><br>
   <label>年龄</label>
 <input type="text" name="age"><br>
  <label>与户主关系</label>
 <input type="text" name="relation"><br>
  <label>身份证</label>
  <input type="text" name="idCard"><br>
    <label>地址</label>
  <input type="text" name="address"><br>
    <label>手机号 </label>
  <input type="text" name="phone"><br>
    <label>是否参合</label>
    
 
  <select id="isReg" name="isReg">
  <option value="是">是</option>
  <option value="否">否</option>
  </select>
  
  
 <label>农合证号</label>
 <input type="text" id="registryNo1" name="registryNo" placeholder="未参合则不填"><br>
  <label>家庭编号</label>
  
 </form>
 <button id="sb2">提交</button>
 
 
 
 
 
 
 
 
 </div>



    <div data-role="dialog" data-close-button="true" data-overlay="true" data-overlay-color="op-dark"
 data-overlay-click-close="true" data-type="info"   id="altlib"  class="padding20">
    <h1>参合登记</h1>
    <form action="regNCMS" method="post" id="regForm" accept-charset="UTF-8"> 


	
	
	
	</form>
   	
    </div>




</div>






<script src="./js/jquery-3.3.1.js"></script>
<script src="./js/metro.js"></script>
<script src="./js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
var currenFamilyNo="";//当前家庭编号
$(document).ready(function(){
	
	
	
	
	var bt1=$("#profileTable").DataTable({
		"ajax":"getFamilyProfile",
		"columns": [
            { "data": "regionCode" },
            { "data": "countyNo" },
            { "data": "groupNo" },
            { data: "familyNo",render:function(data){
            	var fNo="<a href='#' >"+data+"</a>";
            			
            return fNo;
            } },
            { "data": "hostName" },
           
        ]
	});
	
	var bt2=$("#memberTable").DataTable({
		
		"ajax":"getMemberList",
		"columns": [
			{ "data": "id" },
            { "data": "familyNo" },
            { "data": "registryNo" },
            { "data": "name" },           
            { "data": "idCard" },
            { "data": "sex" },
            { "data": "age" },
            { "data": "address" },
            { "data": "phone" },
            { "data": "relation" },
            { data: "isReg",render:function(data){
            if(data=="是")
            	return data;
            else{
            	var bt="<button class='button success'>参合</button>"
            	return bt;
            }
            	
            }},
        ]
		
		
	});
	
	
	
	
	
	$("#profileTable").on("click","a",function(){
		var fNo=$(this).html();
		currenFamilyNo=fNo;
		//console.log(fNo);
		//alert(currenFamilyNo);
		bt2.ajax.url(encodeURI("getMemberList?familyNo="+fNo)).load();
	});
	
	
	$("#memberTable").on("click",".success",function(){
		var tId=$(this).parent().parent().children("td").get(0).innerHTML;
		//alert(tId);
		$.get("getMemberInfo",{id:tId},function(mb){
								
			mb=$.parseJSON(mb);
			person=$.parseJSON(mb);
			$("#regForm").html("");
			for(var item in person){
				//alert("person中 : "+item+"的值="+person[item]);
				if(item!="familyNo")
					if(item!="relation")
						if(item!="isReg")
							if(item!="registryNo")
								if(item!="registry_date"){
									
									 var inp="<br/><label>"+item+"</label>";
				 inp+="<input type='text' name='"+item+"' value='"+person[item]+"'/>";
				 inp+="<br/>";
				 $("#regForm").append(inp);
				
			}
			}

			
	
			
			date=new Date;
			var rNo=person.familyNo+date.getFullYear()+person.id;
			//alert(rNo);
			$("#regForm").append("<input type='hidden' value='"+date.getFullYear()+"' name='year'><br/>");
			$("#regForm").append("<input type='hidden' value='是' name='isReg'><br/>");
			$("#regForm").append("<input type='text' value='"+rNo+"' name='registryNo'><br/>");
			$("#regForm").append("<input type='submit' value='提交'>");

			//$.get("regForm?",{aModel},function(msg){
			//	alert(msg);
			//});
		});
		metroDialog.open("#altlib");
	});
	
	
	$("#button1").click(function(){
		currenFamilyNo=$("#profileTable").find("a:last").text();
		//currenFamilyNo=currenFamilyNo.substring(currenFamilyNo.length,currenFamilyNo.length-2);
		
		
		
		
		var newFNo=parseInt(currenFamilyNo)+1;
		//alert(newFNo);
		$("#familyNo").remove();
		$("#addFamilyProfile").append("<input id='familyNo' name='familyNo' value='"+newFNo+"' readonly>");
		
		metroDialog.open("#addFamily");
	});
	
	$("#button2").click(function(){
		alert(currenFamilyNo);
		$("#familyNo1").remove();
		$("#addFamilyMember").append("<input id='familyNo1' name='familyNo' value='"+currenFamilyNo+"' readonly>");
		
		metroDialog.open("#addMember");
	});
	
	$("#isReg").change(function(){
		
		if($("#isReg").val()=="是")
			$("#registryNo1").prop("disabled",false);
		else
			$("#registryNo1").prop("disabled",true);
		
		//$("#registryNo").toggle();
		//alert($("#isReg").val());
	});
	
	
	$("#sb1").click(function(){
		$("#addFamilyProfile").submit();
	});
	
	$("#sb2").click(function(){
		$("#addFamilyMember").submit();
	});
});

</script>
</body>
</html>